<!DOCTYPE html>
<html lang="zh-en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入ico图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 网站名称 -->
    <title>小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha，小米电视官方网站</title>
    <meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米10 Pro 、小米9、小米MIX Alpha，Redmi 红米系列Redmi 
    10X、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持.">
    <meta name="keywords" content="小米,redmi,小米10,Redmi 10X,小米MIX Alpha,小米商城">
    <!-- 引入css文件 -->
    <link rel="stylesheet" href="css/initial.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/commodity.css">
</head>

<body>
    <div id="app">
        <div>
            <!-- 头部导航栏 -->
            <div class="header">
                <!-- 广告栏 -->
                <div class="banner">
                    <a class="link-block" href="javascript:;">
                        <!-- <img src="img/a1.jpg" alt=""> -->
                    </a>
                </div>
                <!-- 顶部导航栏 -->
                <div class="site-topbar">
                    <div class="container">
                        <!-- 左1 -->
                        <div class="topbar-nav">
                            <a rel="nofollow" href="https://www.mi.com/index.html">小米商城</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">MIUI</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">loT</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">云服务</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">天星数科</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">有品</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">小爱开放平台</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">企业团购</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">资质证照</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">协议规则</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">下载app</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">智能生活</a>
                            <span class="sep">|</span>
                            <a rel="nofollow" href="https://www.mi.com/index.html">Select Location</a>

                        </div>
                        <!-- 左3 -->
                        <div class="user">
                            <em></em> 购物车<span> (0)</span>
                        </div>
                        <!-- 左2 -->
                        <div class="shopping">
                            <a href="javascript:;" class="link">登录</a>
                            <span class="sep">|</span>
                            <a href="javascript:;" class="link">注册</a>
                            <span class="sep">|</span>
                            <span class="message">消息通知</span>
                        </div>
                    </div>



                </div>
                <!-- 头部导航栏 -->
                <div class="site-header">
                    <div class="container">
                        <div class="header-logo">
                            <a href="javascript:;" title="小米官网" class="logo">小米官网</a>
                        </div>
                        <div class="header-nav">
                            <ul class="nav-list">
                                <li class="nav-category">
                                    <div class="site-category">
                                        <ul class="site-category-list">
                                            <li class="category-item">
                                                <a href="#" class="title">手机 电话卡
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">电视 盒子
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">笔记本 显示器
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">家电 插线板
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">出行 穿戴
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">智能 路由器
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">电源配件
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">健康 儿童
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">耳机 音响
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                            <li class="category-item">
                                                <a href="#" class="title">生活 箱包
                                                <em class="iconfont-arrow-right-big"></em>
                                            </a>
                                            </li>
                                        </ul>
                                    </div>
                                </li>
                                <li class="nav-item"><a href="#"><span class="text">小米手机</span></a></li>
                                <li class="nav-item"><a href="#"><span class="text">Redmi红米</span></a></li>
                                <li class="nav-item"><a href="#"><span class="text">电视</span></a></li>
                                <li class="nav-item"><a href="#"><span class="text">笔记本</span></a></li>
                                <li class="nav-item"><a href="#"><span class="text">家电</span></a></li>
                                <li class="nav-item"><a href="#"><span class="text">路由器</span></a></li>
                                <li class="nav-item"><a href="#"><span class="text">智能硬件</span></a></li>
                                <li class="nav-item"><a href="#"><span class="text">服务</span></a></li>
                                <li class="nav-item"><a href="#"><span class="text">社区</span></a></li>
                            </ul>
                        </div>
                        <div class="header-search">
                            <form action="" class="search-form">
                                <input type="text" value="小米手机">
                                <input type="submit" value="" class="search-btn">
                            </form>
                        </div>

                    </div>
                </div>
            </div>
            <!-- 轮播图 -->
            <div class="home-hero-container container">
                <div class="home-hero">

                    <!-- 轮播图 -->
                    <div class="home-hero-swiper ">
                        <!-- 轮播图存放图片的地方 -->
                        <div class="swiper-wrapper"></div>
                        <!-- 轮播图按钮  -->
                        <div class="swiper-pagination">
                            <ul>
                                <li>
                                    <a href="javascript:;" class="swiper-pagination-bullet"></a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="swiper-pagination-bullet"></a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="swiper-pagination-bullet"></a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="swiper-pagination-bullet"></a>
                                </li>
                                <li>
                                    <a href="javascript:;" class="swiper-pagination-bullet"></a>
                                </li>

                            </ul>
                        </div>
                        <!-- 左按钮 -->
                        <div class="swiper-button-prev"></div>
                        <!-- 右按钮 -->
                        <div class="swiper-button-next"></div>
                    </div>
                    <!-- 商品图 -->
                    <div class="home-hero-sub row">
                        <div class="span4">
                            <ul class="home-channel-list clearfix">
                                <li>
                                    <a href="javascript:;">
                                        <img src="upload/miaosha.png" alt=""> 小米秒杀
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="upload/团购.png" alt=""> 企业团购
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="upload/f码通道.png" alt=""> F码通道
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="upload/米粉卡.png" alt=""> 米粉卡
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="upload/换新.png" alt=""> 以旧换新
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="upload/话费.png" alt=""> 话费充值
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="span16">
                            <ul class="home-promo-list clearfix">
                                <li class="first">
                                    <a href="javascript:;">
                                        <img src="img/e5f20a62c3d5b3d6806bd51ab6c5dd12.jpg" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="img/8a43378b96501d7e227a9018fe2668c5.jpg" alt="">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <img src="img/793913688bfaee26b755a0b0cc8575fd.jpg" alt="">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 商品区域 -->
            <div class="page-main home-main">
                <div class="container">
                    <div class="home-flashsale xm-plain-box">
                        <div class="box-hd">
                            <h2 class="title">小米闪购</h2>
                        </div>
                        <div class="box-bd clearfix">
                            <div class="row">
                                <div class="flashsale-countdown rainbow-item-4 span4">
                                    <div class="round">14:00场</div>
                                    <img src="img/下载" alt="小米闪购">
                                    <div class="desc">距离结束还有</div>
                                    <div class="countdown clearfix">
                                        <span>00</span>
                                        <i>:</i>
                                        <span>00</span>
                                        <i>:</i>
                                        <span>00</span>
                                    </div>
                                </div>
                                <div class="span16 flashsale-list ">
                                    <ul class="swiper-wrapper">
                                        <li class="swiper-slid one1"></li>
                                        <li class="swiper-slid one2"></li>
                                        <li class="swiper-slid one3"></li>
                                        <li class="swiper-slid one4"></li>
                                    </ul>
                                </div>

                                <div class="swiper-controls">
                                    <span class="swiper-flashsale-prev"><</span>
                                    <span class="swiper-flashsale-next">></span>
                                </div>

                            </div>

                        </div>
                        <div class="home-banner-box">
                            <a href="#">
                                <img src="img/小米10.webp" alt="">
                            </a>
                        </div>
                        <!-- 手机 -->
                        <div class="home-brick-box">
                            <div class="box-hd">
                                <h2 class="title">手机</h2>
                                <div class="more">
                                    <a href="#">查看全部</a>
                                    <i></i>
                                </div>
                            </div>
                            <div class="box-bd clearfix">
                                <div class="row">
                                    <div class="span4">
                                        <ul class="brick-promo-list clearfix">
                                            <li class="brick-item brick-item-l">
                                                <a href="#">
                                                    <img src="img/小米概念手机.webp" alt="">
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="span16">
                                        <ul class="brick-list clearfix">
                                            <li class="brick-item">
                                                <a href="#">
                                                    <div class="figure figure-img">
                                                        <img src="img/小米10至尊.webp" width="160px" height="160px" alt="小米10至尊版">
                                                    </div>
                                                    <h3 class="title">小米10 至尊版</h3>
                                                    <p class="desc">120X 变焦/120W秒充/120Hz屏幕 </p>
                                                    <p class="price">5299元起</p>
                                                </a>
                                            </li>
                                            <li class="brick-item">
                                                <a href="#">
                                                    <div class="figure figure-img">
                                                        <img src="img/小米10至尊.webp" width="160px" height="160px" alt="小米10至尊版">
                                                    </div>
                                                    <h3 class="title">小米10 至尊版</h3>
                                                    <p class="desc">120X 变焦/120W秒充/120Hz屏幕 </p>
                                                    <p class="price">5299元起</p>
                                                </a>
                                            </li>
                                            <li class="brick-item">
                                                <a href="#">
                                                    <div class="figure figure-img">
                                                        <img src="img/小米10至尊.webp" width="160px" height="160px" alt="小米10至尊版">
                                                    </div>
                                                    <h3 class="title">小米10 至尊版</h3>
                                                    <p class="desc">120X 变焦/120W秒充/120Hz屏幕 </p>
                                                    <p class="price">5299元起</p>
                                                </a>
                                            </li>
                                            <li class="brick-item">
                                                <a href="#">
                                                    <div class="figure figure-img">
                                                        <img src="img/小米10至尊.webp" width="160px" height="160px" alt="小米10至尊版">
                                                    </div>
                                                    <h3 class="title">小米10 至尊版</h3>
                                                    <p class="desc">120X 变焦/120W秒充/120Hz屏幕 </p>
                                                    <p class="price">5299元起</p>
                                                </a>
                                            </li>
                                            <li class="brick-item">
                                                <a href="#">
                                                    <div class="figure figure-img">
                                                        <img src="img/小米10至尊.webp" width="160px" height="160px" alt="小米10至尊版">
                                                    </div>
                                                    <h3 class="title">小米10 至尊版</h3>
                                                    <p class="desc">120X 变焦/120W秒充/120Hz屏幕 </p>
                                                    <p class="price">5299元起</p>
                                                </a>
                                            </li>
                                            <li class="brick-item">
                                                <a href="#">
                                                    <div class="figure figure-img">
                                                        <img src="img/小米10至尊.webp" width="160px" height="160px" alt="小米10至尊版">
                                                    </div>
                                                    <h3 class="title">小米10 至尊版</h3>
                                                    <p class="desc">120X 变焦/120W秒充/120Hz屏幕 </p>
                                                    <p class="price">5299元起</p>
                                                </a>
                                            </li>
                                            <li class="brick-item">
                                                <a href="#">
                                                    <div class="figure figure-img">
                                                        <img src="img/小米10至尊.webp" width="160px" height="160px" alt="小米10至尊版">
                                                    </div>
                                                    <h3 class="title">小米10 至尊版</h3>
                                                    <p class="desc">120X 变焦/120W秒充/120Hz屏幕 </p>
                                                    <p class="price">5299元起</p>
                                                </a>
                                            </li>
                                            <li class="brick-item">
                                                <a href="#">
                                                    <div class="figure figure-img">
                                                        <img src="img/小米10至尊.webp" width="160px" height="160px" alt="小米10至尊版">
                                                    </div>
                                                    <h3 class="title">小米10 至尊版</h3>
                                                    <p class="desc">120X 变焦/120W秒充/120Hz屏幕 </p>
                                                    <p class="price">5299元起</p>
                                                </a>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 页脚 -->
        <div>
            <div class="site-footer">
                <div class="container">
                    <!-- 上边 -->
                    <div class="footer-service">
                        <ul class="list-service clearfix">
                            <li>
                                <a href="#"><em class="iconfont-tool"></em>预约维修服务</a>
                            </li>
                            <li>
                                <a href="#"><em class="iconfont-tool"></em>七天无理由拖货</a>
                            </li>
                            <li>
                                <a href="#"><em class="iconfont-tool"></em>15天免费换货</a>
                            </li>
                            <li>
                                <a href="#"><em class="iconfont-tool"></em>满99元包邮</a>
                            </li>
                            <li>
                                <a href="#"><em class="iconfont-tool"></em>520余家售后网点</a>
                            </li>
                        </ul>
                    </div>
                    <!-- 下边 -->
                    <div class="footer-links clearfix">
                        <dl class="col-links">
                            <dt>帮助中心</dt>
                            <dd><a href="#">账户管理</a></dd>
                            <dd><a href="#">购物指南</a></dd>
                            <dd><a href="#">订单操作</a></dd>
                        </dl>
                        <dl class="col-links">
                            <dt>帮助中心</dt>
                            <dd><a href="#">账户管理</a></dd>
                            <dd><a href="#">购物指南</a></dd>
                            <dd><a href="#">订单操作</a></dd>
                        </dl>
                        <dl class="col-links">
                            <dt>帮助中心</dt>
                            <dd><a href="#">账户管理</a></dd>
                            <dd><a href="#">购物指南</a></dd>
                            <dd><a href="#">订单操作</a></dd>
                        </dl>
                        <dl class="col-links">
                            <dt>帮助中心</dt>
                            <dd><a href="#">账户管理</a></dd>
                            <dd><a href="#">购物指南</a></dd>
                            <dd><a href="#">订单操作</a></dd>
                        </dl>
                        <dl class="col-links">
                            <dt>帮助中心</dt>
                            <dd><a href="#">账户管理</a></dd>
                            <dd><a href="#">购物指南</a></dd>
                            <dd><a href="#">订单操作</a></dd>
                        </dl>
                        <dl class="col-links">
                            <dt>帮助中心</dt>
                            <dd><a href="#">账户管理</a></dd>
                            <dd><a href="#">购物指南</a></dd>
                            <dd><a href="#">订单操作</a></dd>
                        </dl>
                        <dl class="col-contact">
                            <p class="phone">400-100-5678</p>
                            <p>8:00-18:00（仅收市话费）</p>
                            <a href="#" class="btn-line-primary">
                                <em></em>人工客服
                            </a>
                            <div class="follow">
                                关注小米:
                                <a href="#" class="wb"></a>
                                <a href="#" class="wx"></a>

                            </div>
                        </dl>
                    </div>
                </div>
            </div>
            <div class="site-info"></div>
        </div>

    </div>
    <!-- 固定定位 -->
    <div class="home-tool-bar">

        <a href="#" class="item">
            <div class="icon"></div>
            <span class="text">手机app</span>
        </a>
        <a href="#" class="item">
            <div class="icon"></div>
            <span class="text">个人中心</span>
        </a>
        <a href="#" class="item">
            <div class="icon"></div>
            <span class="text">售后服务</span>
        </a>
        <a href="#" class="item">
            <div class="icon"></div>
            <span class="text">人工客服</span>
        </a>
        <a href="#" class="item">
            <div class="icon"></div>
            <span class="text">购物车</span>
        </a>
        <a href="#" class="item">
            <div class="icon"></div>
            <span class="text">回顶部</span>
        </a>
    </div>
</body>

</html>